<template>
  <div class="icon-picker">
    <!-- 选中的图标预览 -->
    <div class="selected-icon flex items-center gap-2 p-3 border border-gray-200 rounded-md mb-3 bg-gray-50">
      <i :class="['fa', currentValue, 'text-2xl text-primary']" v-if="currentValue"></i>
      <span v-else class="text-gray-400">未选择图标</span>
      <span class="ml-auto text-sm text-gray-500" v-if="currentValue">
        {{ currentValue }}
      </span>
    </div>
    
    <!-- 搜索框 -->
    <input
      type="text"
      v-model="searchQuery"
      class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm mb-3"
      placeholder="搜索图标..."
    >
    
    <!-- 图标列表 -->
    <div class="icon-grid grid grid-cols-6 gap-2 max-h-60 overflow-y-auto p-2 border border-gray-200 rounded-md">
      <div 
        v-for="icon in filteredIcons" 
        :key="icon"
        class="icon-item flex items-center justify-center p-3 rounded-md hover:bg-primary/10 cursor-pointer transition-colors"
        @click="selectIcon(icon)"
      >
        <i :class="['fa', icon, 'text-xl']"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, computed } from 'vue';

// 常用Font Awesome图标列表（简化版）
const COMMON_ICONS = [
  'fa-check', 'fa-times', 'fa-plus', 'fa-minus', 'fa-edit', 'fa-trash',
  'fa-save', 'fa-search', 'fa-home', 'fa-user', 'fa-cog', 'fa-bars',
  'fa-arrow-up', 'fa-arrow-down', 'fa-arrow-left', 'fa-arrow-right',
  'fa-copy', 'fa-paste', 'fa-undo', 'fa-redo', 'fa-eye', 'fa-eye-slash',
  'fa-info', 'fa-question', 'fa-exclamation', 'fa-star', 'fa-heart',
  'fa-envelope', 'fa-phone', 'fa-globe', 'fa-image', 'fa-file', 'fa-calendar'
];

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  emits: ['input'],
  setup(props) {
    const currentValue = ref(props.value);
    const searchQuery = ref('');
    
    // 过滤图标列表
    const filteredIcons = computed(() => {
      if (!searchQuery.value) return COMMON_ICONS;
      
      const query = searchQuery.value.toLowerCase();
      return COMMON_ICONS.filter(icon => 
        icon.toLowerCase().includes(query)
      );
    });

    // 监听外部值变化
    watch(
      () => props.value,
      (newVal) => {
        currentValue.value = newVal;
      }
    );

    // 选择图标
    const selectIcon = (icon) => {
      currentValue.value = icon;
      $emit('input', icon);
    };

    return {
      currentValue,
      searchQuery,
      filteredIcons,
      selectIcon
    };
  }
};
</script>

<style scoped>
.icon-grid {
  scrollbar-width: thin;
}

.icon-grid::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.icon-grid::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 2px;
}

.icon-item:hover {
  transform: scale(1.05);
}

.icon-item.selected {
  background-color: rgba(22, 93, 255, 0.1);
  border: 1px solid #165DFF;
}
</style>
    